<template>
  <div class="all-select flex justify-end">
    <div class="select-box flex" @click.stop="isAll = !isAll">
      <div class="flex-1 font-26 text-right">
        {{  symbol?symbol.toUpperCase()+'/USDT':$t('全部') }}
      </div>
      <van-icon name="arrow-down" />
      <div class="select-data" v-if="isAll">
        <div class="select-item font-24" :class="symbol === item2.symbol ? 'actSelect' : '' "
             @click.stop="selectItem(item2.symbol)" v-for="(item2, index) in currencyList"
             :key="index">{{ item2.symbol ? item2.symbol.toUpperCase() + '/USDT' : $t('全部') }}</div>
      </div>
    </div>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具 js，第三方插件 js，json 文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》 ';

import {_getCoins} from "@/API/home.api";

export default {
  // import 引入的组件需要注入到对象中才能使用
  components: {},
  props: {
    symbol:{
      type: String,
      default:'',
    },
    isShowAll:{
      type:Boolean,
      default: true,
    }
  },
  data() {
    // 这里存放数据
    return {
      isAll: false,
      currencyList:[],
    }
  },
  // 计算属性 类似于 data 概念
  computed: {},
  // 监控 data 中的数据变化
  watch: {
  },
  // 方法集合
  methods: {
    getCoins() {
      _getCoins().then((res) => {
        this.currencyList = res
        if(this.isShowAll){
          this.currencyList.unshift({symbol:''})
        }
      })
    },
    selectItem(symbol){
      this.isAll =false
      this.$emit('updateCoin',symbol)
    }
  },
  // 生命周期 - 创建完成（可以访问当前this 实例）
  created() {
  },
  // 生命周期 - 挂载完成（可以访问 DOM 元素）
  mounted() {
    this.getCoins()
  },
  beforeCreate() {
  },
  beforeMount() {
  }, // 生命周期 - 挂载之前
  beforeUpdate() {
  }, // 生命周期 - 更新之前
  updated() {
  }, // 生命周期 - 更新之后
  beforeDestroy() {
  }, // 生命周期 - 销毁之前
  destroyed() {
  }, // 生命周期 - 销毁完成
  activated() {
  } // 如果页面有 keep-alive 缓存功能,这个函数会触发
}
</script>

<style scoped lang="scss">
.all-select {
  padding: 30px 30px 0;

  .select-box {
    width: 160px;
    height: 50px;

    @include themify() {
      color: themed("color_main");
    }

    display: flex;
    align-items: center;
    font-size: 30px;
    padding: 0 20px;
    position: relative;

    .select-data {
      position: absolute;
      top: 55px;
      left: 0;
      z-index: 10;
      width: 100%;
      height: 600px;
      overflow-y: auto;

      @include themify() {
        background: themed("input_background");
      }


      .select-item {
        padding: 20px 20px;
        text-align: center;
        background: #fff;
        @include themify() {
          border-bottom: 1px solid themed("border_color");
          color: themed("text_color1");
        }
      }
      .actSelect{

        @include themify() {
          color: themed("color_main");
        }
      }
    }
  }
}
</style>